<template>
	<view class="flex-col page">
	  <view class="flex-col flex-auto group">
	    <view class="flex-col items-center section space-y-8">
	      <text class="text_2">积分规则</text>
	      <text class="text_3">•••会员可享多重权益•••</text>
	    </view>
	    <view class="flex-col group_2">
	      <image
	        class="image_3"
	        src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/648fa3e25a7e3f031021cdb9/64952299726ab50011f31705/16874965938774264955.png"
	      />
	      <view class="flex-col section_2 space-y-20">
	        <view class="flex-col items-start space-y-12">
	          <text class="font_1 text_4">•••积分商城 积分规则•••</text>
	          <text class="font_2">☀积分一旦使用兑换商品后，积分概不退回</text>
	          <text class="font_2">☀积分可用来兑换积分商城内的商品，暂不支持其他用途</text>
	          <text class="font_2">☀积分的获取需要通过幸运大转盘抽奖获得，用于商品兑换</text>
	        </view>
	      </view>
	      <view class="flex-col items-center section_3 space-y-12">
	        <text class="font_1">•••常见问题•••</text>
	        <text class="font_2 text_5">积分商城自主兑换优惠券、商品、抽奖机会或服务</text>
	      </view>
	      <view class="flex-col section_4 space-y-10">
	        <text class="self-center font_1">•••积分有效期•••</text>
	        <view class="flex-col items-center group_3">
	          <text class="font_3">自积分产生之日起至次年年底有效</text>
	          <text class="font_3">具体积分规则和使用说明以门店公示为准</text>
	        </view>
	      </view>
	    </view>
		<footer class="footer">
			<p>&copy; 2023. All rights reserved.</p>
		</footer>
	  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.page {
  background-color: #ffffff;
  overflow: hidden;
  border: solid 2rpx #ffffff;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.group {
  padding: 0 32rpx;
  overflow-y: auto;
}
.section {
  padding: 52rpx 0 4rpx;
  background-color: #ffffff;
  overflow: hidden;
}
.space-y-8 > view:not(:first-child),
.space-y-8 > text:not(:first-child),
.space-y-8 > image:not(:first-child) {
  margin-top: 16rpx;
}
.text_2 {
  color: #000000;
  font-size: 50rpx;
  font-family: AlimamaShuHeiTi;
  line-height: 46rpx;
}
.text_3 {
  color: #9ca3af;
  font-size: 28rpx;
  font-family: SourceHanSansCN;
  line-height: 26rpx;
}
.group_2 {
  padding: 34rpx 0 52rpx;
}
.image_3 {
  border-radius: 16rpx;
  filter: drop-shadow(0px 2rpx 3rpx #0000001a, 0px 2rpx 2rpx #0000000f);
  overflow: hidden;
  width: 684rpx;
  height: 368rpx;
}
.section_2 {
  margin: 28rpx 8rpx 0;
  padding: 16rpx 4rpx 16rpx 32rpx;
  background-color: #ffffff;
  box-shadow: 2px 2px 2px 1px #f8baba;
  filter: drop-shadow(0px 4rpx 4rpx #00000040);
  border: 3px solid #EBEEF5;
  border-radius: 16rpx;
  
  backdrop-filter: blur(4rpx);
  overflow: hidden;
  border: solid 2rpx #ffffff;
}
.space-y-20 > view:not(:first-child),
.space-y-20 > text:not(:first-child),
.space-y-20 > image:not(:first-child) {
  margin-top: 40rpx;
}
.font_1 {
  font-size: 32rpx;
  font-family: PangMenZhengDao;
  line-height: 23rpx;
  color: #544c4c;
}
.text_4 {
  margin-left: 130rpx;
}
.font_2 {
  font-size: 24rpx;
  font-family: SourceHanSansCN;
  line-height: 23rpx;
  color: #000000;
}
.section_3 {
  margin-top: 32rpx;
  padding: 28rpx 0 48rpx;
  background-color: #ffffff;
  box-shadow: 2px 2px 2px 1px #f8baba;
  border: 3px solid #EBEEF5;
  border-radius: 16rpx;
  overflow: hidden;
}
.space-y-12 > view:not(:first-child),
.space-y-12 > text:not(:first-child),
.space-y-12 > image:not(:first-child) {
  margin-top: 24rpx;
}
.text_5 {
  line-height: 22rpx;
}
.section_4 {
  margin-top: 40rpx;
  padding: 28rpx 24rpx 18rpx 34rpx;
  background-color: #ffffff;
  box-shadow: 2px 2px 2px 1px #f8baba;
  border: 3px solid #EBEEF5;
  border-radius: 16rpx;
  filter: drop-shadow(0px 20rpx 15rpx #0000001a, 0px 8rpx 6rpx #0000000d);
  overflow: hidden;
}
.space-y-10 > view:not(:first-child),
.space-y-10 > text:not(:first-child),
.space-y-10 > image:not(:first-child) {
  margin-top: 20rpx;
}
.group_3 {
  overflow: hidden;
  height: 72rpx;
}
.font_3 {
  font-size: 24rpx;
  font-family: SourceHanSansCN;
  line-height: 40rpx;
  color: #000000;
}
.footer {
			text-align: center;
			padding: 20rpx 0;
			
			font-size: 14rpx;
		}
</style>
